<!DOCTYPE html>
<!--  
**    Copyright (C) 2012 Institute for Systems Biology 
**                       Seattle, Washington, USA. 
**
**    This library is free software; you can redistribute it and/or
**    modify it under the terms of the GNU Lesser General Public
**    License as published by the Free Software Foundation; either
**    version 2.1 of the License, or (at your option) any later version.
**
**    This library is distributed in the hope that it will be useful,
**    but WITHOUT ANY WARRANTY; without even the implied warranty of
**    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
**    Lesser General Public License for more details.
**
**    You should have received a copy of the GNU Lesser General Public
**    License along with this library; if not, write to the Free Software
**    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
-->

<!-- Page that shows multiple scatter plots for same association lined up next to each other -->


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ScatterShot</title>
<style>

.aBranding {
 background: #003F72 url(images/isblogo50.png) 3px center no-repeat;
 height: 40px;
 width: 100%;
 color: #FFFFFF;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 22px;
 font-weight: bold;
 line-height: 40px;
 margin-bottom: 5px;
}

.brandingText {
 display: block;
 text-align: right;
 margin-right: 10px;
}

.aHeader {
 background: #ADCCE5;
 margin: auto;
 height: 50px;
 width: 100%;
}

.aFooter { 
 background: #ADCCE5;
 margin: auto;
 clear: both;
 height: 50px;
 width: 100%;
}

.aWrapper { 
 background: #ADCCE5;
 margin: auto;
 height: 200px;
 float: left;
}

.aPlot { 
 background: #ADCCE5;
 margin: auto;
 height: 200px;
 width: 212px;
}

.aCanvas { 
 margin: 0;
}

.aButton {
 display: block;
 margin: auto;
 width: 100px;
}

.titleStuff {
 font-family: Arial;
 font-size: 20pt;
 text-align: center;
 margin: auto;
}

.plotLabel {
 font-family: Arial;
 font-size: 15pt;
 text-align: center;
 margin: auto;
} 
</style>

<!-- Here is the data retriever -->
<script type="text/javascript" src="js/pdr.js"></script>
<!-- Here is the data display -->
<script type="text/javascript" src="js/pdd.js"></script>
<script type="text/javascript">

  // Get the given parameter
  function get_parameter(paramName) {
    var hu = window.location.search.substring(1);
    var gy = hu.split("&");
    for (var i = 0; i < gy.length; i++) {
      var ft = gy[i].split("=");
      if (ft[0] == paramName) {
        return ft[1];
      }
    }
    return null;
  }
  
  // Build a titled canvas div 
  function buildCanvasDiv(cvsDiv, i, width, height, totnum) {
    var wDiv = document.createElement("div");
    wDiv.className = "aWrapper";
    var percen = (100.0 / totnum); 
    wDiv.style.width = percen + "%";
    cvsDiv.appendChild(wDiv);
    var pDiv = document.createElement("div");
    pDiv.className = "aPlot";
    wDiv.appendChild(pDiv);
    var can = document.createElement("canvas");
    can.className = "aCanvas";
    can.id = "canvasId" + i;
    can.width = width;
    can.height = height;
    pDiv.appendChild(can);
    var bre = document.createElement("br");
    pDiv.appendChild(bre);
    var tdiv = document.createElement("div");
    tdiv.className = "plotLabel";
    tdiv.id = "title" + i;
    pDiv.appendChild(tdiv);
    return;
  }
 
  // Get params, usual boilerplate
  var gene1 = get_parameter("gene1");
  var gene2 = get_parameter("gene2");
  var type1 = get_parameter("type1");
  var type2 = get_parameter("type2");
  var dbs = get_parameter("dbs");
  var dataRoot0 = window.location.protocol + "//" + window.location.host;
  var dataRoot1 = ""; // Useful if proxy needed ... "/ProxyServlet";
  var dataRoot2 = "/google-dsapi-svc/addama/datasources/tcga/";
  var dataRoot = dataRoot0 + dataRoot1 + dataRoot2;

  window.addEventListener("load", eventWindowLoaded, false);

  // Page code guts
  function eventWindowLoaded() { 
    
    if ((dbs === undefined) || (gene1 === undefined) || (gene2 === undefined) || (type1 === undefined) || (type2 === undefined)) {
      return;
    }
    
    var noPoints = [];
    var dataSources = dbs.split(':');
    var numCanv = dataSources.length;
    
  	// Initialize page title with gene names
  	var desc = gene1 + " " + type1 + " versus " + gene2 + " " + type2;  
    document.title = "ScatterShot: " + desc;
    document.getElementById("titleInfo").innerHTML = desc;
    
    // Build the number of canvases we need:
    var cvsDiv = document.getElementById("canvases");
    for (var i = 0; i < numCanv; i++) {
      buildCanvasDiv(cvsDiv, i, 212, 160, numCanv);
    }  
    
    // Each plot has own data retriever and data display
    var myPatRetrs = []; 
    var myPatDataDisplays = [];
    
    // Label each plot with data source
  	for (var i = 0; i < numCanv; i++) {
  	  document.getElementById("title" + i).innerHTML = dataSources[i]; 	  
  	}
  	
  	// Initialize each retriever and data display and register them 
	for (var i = 0; i < numCanv; i++) {
	  myPatRetrs[i] = new pdr.PatientDataRetriever(dataRoot); 
	  myPatRetrs[i].setDataSource(dataSources[i]);
	  myPatDataDisplays[i] = new pdd.PatientDataDisplay("canvasId" + i); 
	  myPatDataDisplays[i].reset();
	  myPatRetrs[i].setDataDisplay(myPatDataDisplays[i]);  
	}
	for (var i = 0; i < numCanv; i++) {
	  myPatDataDisplays[i].register(myPatDataDisplays, i); 
	}
	
	// Install blank data on each display to start
	for (var i = 0; i < numCanv; i++) {
	  myPatDataDisplays[i].installData(noPoints, "", "");
	  myPatDataDisplays[i].render();
	}
	
	// Get ready to load
    for (var i = 0; i < numCanv; i++) {
      myPatDataDisplays[i].reset();
    }

	// Start the data loading process
    for (var i = 0; i < numCanv; i++) {
      myPatRetrs[i].getPatientDataFromTags(gene1, gene2, type1, type2);
    }
    return;
  }
  
  // Change argument order to swap axes
  function swapOrder() {
    var urlStart = window.location.href.split("?")[0];
    return (urlStart + "?dbs=" + dbs + "&gene1=" + gene2 + "&type1=" + type2 + "&gene2=" + gene1 + "&type2=" + type1);
  }
  
</script>

</head>
<body>
  <div class="aBranding"><span class="brandingText">ScatterShot</span></div>
  <div id="headerElem" class="aHeader"><div id="titleInfo" class="titleStuff" ></div></div>
  <div id="canvases">
  <!-- To be filled in dynamically to match comparison count-->
  </div>
  <form> 
    <div id="footerElem" class="aFooter">
      <input type=button value="Swap Order" onClick="self.location=swapOrder()" class="aButton">
    </div>
  </form> 
</body>
</html>